<template>
    <div>
        <div  v-if="isRelation">
             <h3 class="dialog-plate-title"><span>已添加标签</span></h3>
             <div  v-if="relationTag.length>0">
                <el-tag class="tag" v-for="tag in relationTag" :key="tag.id" closable  :type="tag.type==1?'warning':(tag.type==2?'success':'danger')" @close="deleteRelation(tag)"> {{tag.name}}</el-tag>
             </div>
             <div v-else class="el-table__empty-text">暂未添加任何标签</div>
            <h3 class="dialog-plate-title"><span>未添加标签</span></h3>
            <el-button @click="addRelation()" icon="el-icon-plus">添加标签</el-button>
        </div>
        <el-button type="success" @click="isShowDialog('insert')" icon="el-icon-plus" v-if="!disabled&&!isRelation">新增</el-button>
        <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;"
        :height="tableHeight" :header-cell-style="getRowClass" v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column fixed type="index" label="*" sortable min-width="40" align="center"></el-table-column>
            <el-table-column type="selection" width="55" v-if="isRelation"></el-table-column>
            <el-table-column prop="name" label="标签名称" show-overflow-tooltip sortable min-width="120" align="center">
                <template slot-scope="scope">
                     <el-tag v-for="item in tagType" :key="item.value" :type="item.color" v-if="scope.row.type==item.value"> {{scope.row.name}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="标签类型" show-overflow-tooltip  min-width="120" align="center" :filters="tagType"
      :filter-method="filterTag">
                 <template slot-scope="scope">
                     <el-tag v-for="item in tagType" :key="item.value" v-if="scope.row.type === item.value" :type="item.color"> {{item.text}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="200" v-if="!disabled&&!isRelation ">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog('update',scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteDate(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
         <el-dialog :title="dialog.title" width="400px" top="40px"  center :visible.sync="dialog.isShow" :close-on-click-modal="false" :modal="false" >
              <el-form :model="tagForm" :rules="rules" label-position="right" ref="tagForm" label-width="100px" >
                   <el-form-item label="标签名称" prop="name" >
                        <el-input v-model="tagForm.name" placeholder="请输入标签类型"></el-input>
                    </el-form-item>
                    <el-form-item label="标签类型" prop="type" >
                        <el-select v-model="tagForm.type" placeholder="请选择标签类型">
                            <el-option :label="item.text" :value="item.value" v-for=" item in tagType" :key="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addUpdate()">{{addType=='insert'?'新增':'修改'}}</el-button>
                </el-form-item>
        </el-form>
        </el-dialog>
    </div>
</template>
<script>
import api from '@/axios/api.js'
export default {
    name:'tag',
    props:{
        tagLiterature:Object,
        isRelation:Boolean,
        disabled:Boolean
    },
    data(){
        return {
            tabaleData:[],
            tableHeight:'600px',
            loading:false,
            tagType:[{
                value:'1',
                text:'疾病类型',
                color:'info',
            },
            {
                value:'2',
                text:'科室',
                color:'sucess',
            },
            {
                value:'3',
                text:'非pe',
                color:'warning',
            },
            {
                value:'4',
                text:'pe',
                color:'danger'

            }],
            tagForm:{},

            rules:{
                name:[{required: true, message: '请输入标签名称', trigger: 'blur' }],
                type:[{required: true, message: '请输入标签类型', trigger: 'blur' }],
            },
            addType:'',
            dialog:{
                title:'',
                isShow:false
            },
            selectTag:[],/**已选中标签 */
            relationTag:[]/**已关联标签 */
        }
    },
    watch: {
      tagLiterature(newValue,oldValue){
        this.isRelation ? this.getNotRelationTag():'';
      }
    },
    created(){
       this.isRelation ? this.getNotRelationTag(): this.getTagList();
    },
    methods:{
        isShowDialog(type,row){/**新增修改标签弹框显示 */
            let self =this;
            self.addType=type;
            self.dialog.title = `${type==='insert'?'新增':'修改'}标签`;
            self.dialog.isShow = true;
            self.tagForm = type==='insert'?{}:row;

        },
        getNotRelationTag(){/**获取未关联标签和已关联标签列表 */
        let self = this;
         self.tabaleData =[];
            api.tagList().then(res=>{
                self.loading=false;
                api.relationTagList(self.tagLiterature.id).then(result=>{ /**获取已关联标签列表 */
                self.relationTag = result.content;
                for(let i=0;i<res.content.length;i++){
                    let allObj=res.content[i];
                    let isExist = false;
                    for(let j=0;j<result.content.length;j++){
                        let selectObj=result.content[j];
                        if(allObj.id===selectObj.id){
                            isExist = true;
                            break;
                        }
                    }
                    if(!isExist){
                        self.tabaleData.push(allObj);
                    }
                }
            })
            },error=>{
                self.loading=false;
            })
        },
        getTagList(){/**获取所有标签列表 */
            let self =this;
            self.loading=true;

            api.tagList().then(res=>{
                self.loading=false;
                self.tabaleData=res.content;
            },error=>{
                self.loading=false;
            })
        },
        getRelationTag(){/**获取已关联标签列表 */
            let self = this;
            api.relationTagList(self.tagLiterature.id).then(res=>{
                self.relationTag = res.content;
            })
        },
        addUpdate(){/**新增标签 */
            let self =this;
            self.$refs['tagForm'].validate((valid) => {
                    if(valid){
                        let data={
                            name:self.tagForm.name,
                            type:self.tagForm.type
                        }
                        self.addType ==='update'? data.id=self.tagForm.id:'';
                        api.addUpdateTag(self.addType,data).then(res=>{
                             self.$message.success(`标签${self.addType=='insert'?'新增':'修改'}成功`);
                             self.dialog.isShow = false;
                             self.getTagList();
                        },error=>{
                            self.$message.error(`标签${self.addType=='insert'?'新增':'修改'}失败`);
                        })
                    }
            })
        },
        deleteDate(row){/**删除标签 */
            let self = this;
            self.$confirm('确认是否删除标签?', '提示', {
                confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    api.tagDelete(row.id).then(res=>{
                            self.getTagList();
                            self.$message.success("标签删除成功！");
                        },error=>{
                            self.$message.error("标签删除失败！");
                        })
                }).catch(() => {
            });
        },
        addRelation(){/**点击添加关联标签 */
            let self  =this;
            if(self.selectTag.length>0){
                let data=[];
                self.selectTag.forEach(el => {
                    data.push({
                        lid:el.id,
                        did:self.tagLiterature.id
                    })
                });
                api.addRelationTag(data).then(res=>{
                     self.$message.success("标签关联成功！");
                     self.getNotRelationTag();

                },error=>{
                    self.$message.error("标签关联失败！");
                })
            }else{
                 self.$message.error("请至少选择一个标签");
            }
        },
        handleSelectionChange(row){/**选择关联标签 */
            let self = this;
            self.selectTag = row;
        },
        filterTag(value, row){/**根据标签类型筛选标签 */
            return row.type === value;
        },
        deleteRelation(tag){
            let self = this;
            self.$confirm('移除标签关联吗?', '提示', {
                confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    api.deteteRelationTag(tag.relationId).then(res=>{
                            self.getNotRelationTag();
                            self.$message.success("移除标签关联成功！");
                        },error=>{
                            self.$message.error("移除标签关联失败！");
                        })
                }).catch(() => {
            });
        }
    }
}
</script>
<style scoped>
.dialog-plate-title{
    margin:16px auto;
}
.tag{
    margin-right:16px;
}
.el-table__empty-text{
    width:100%;
    text-align:center;
}
</style>
